<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>
        js调用java
    </title>
</head>

<body>
    <p>
        <xmp id="show">
        </xmp>
    </p>
    <div>
        <h2 id="show">这是测试网页</h2>
    </div>
    <div align="center">
        <p>
            <input type="button" id="btn1" value="调用相册" onclick="openAlbum();" />
        </p>
        <p>
            <input type="button" id="btn2" value="调用支付(微信)" onclick="openPayWeChat();" />
        </p>
        <p>
            <input type="button" id="btn3" value="调用支付(支付宝)" onclick="openPayAli();" />
        </p>
        <!-- <p>
        <input type="button" id="btn3" value="调用压缩(iOS)" onclick="compressVideo();" />
    </p> -->
        <p>
            <input type="button" id="btn4" value="关闭当前界面(Android)" onclick="closeNativePage();" />
        </p>
        <p>
            <input type="button" id="btn5" value="微信登录" onclick="wechatlogin();" />
        </p>
        <p>
            <input type="button" id="btn6" value="开始语音识别" onclick="startWeChatVoice();" />
        </p>
        <p>
            <input type="button" id="btn7" value="结束语音识别" onclick="stopWeChatVoice();" />
        </p>
        <p>
            <input type="button" id="btn8" value="开始录音" onclick="startNativeRecord();" />
        </p>
        <p>
            <input type="button" id="btn9" value="结束录音上传" onclick="stopNativeRecord();" />
        </p>
        <p>
            <textarea id="text_info" rows="10"></textarea>
        </p>
    </div>
</body>
<script>
    var u = navigator.userAgent,
        isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

    function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            if (!isAndroid) {
                document.addEventListener(
                    'GCWebviewAndroidJSBridgeReady'
                    , function () {
                        callback(GCWebviewAndroidJSBridge)
                    },
                    false
                );
                //iOS
                if (window.GCWebviewJSBridge) {
                    return callback(GCWebviewJSBridge);
                }
                if (window.KBWVJSBCallBacks) {
                    return window.KBWVJSBCallBacks.push(callback);
                }
                window.KBWVJSBCallBacks = [callback];
                var GCWVJSBIframe = document.createElement('iframe');
                GCWVJSBIframe.style.display = 'none';
                GCWVJSBIframe.src = 'gcwvjsbscheme://__GC_BRIDGE_LOADED__';
                document.documentElement.appendChild(GCWVJSBIframe);
                setTimeout(function () { document.documentElement.removeChild(GCWVJSBIframe) }, 0);
            } else {
                document.addEventListener('WebViewJavascriptBridgeReady', function (event) {
                    callback(WebViewJavascriptBridge)
                }, false)
            }
        }
    }

    setupWebViewJavascriptBridge(function (bridge) {
        bridge.init(function (message, responseCallback) {
            responseCallback({ 'Javascript Responds': 'Wee!' })
        })
        bridge.registerHandler('callJsBack', function (data, responseCallback) {
            console.log('callJsBack');
            alert('调用callJsBack')
        });
    });

    //在改function 中添加原生调起js方法
    setupWebViewJavascriptBridge(function (bridge) {
        console.log("执行1");
        bridge.registerHandler("onJsBack", function (data, responseCallback) {
            console.log("执行2");
        });
    })

    // 调用原生相册
    function openAlbum() {
        window.WebViewJavascriptBridge.callHandler(
            'openNativeAlbum',
            { "maxNum": 10 },
            function (responseData) {
                console.log(responseData);
                var ele = document.getElementById("text_info");
                ele.value = ele.value + responseData;
            }
        )
    }

    //调用原生支付
    function openPayWeChat() {
        // type: 1微信，2支付宝
        window.WebViewJavascriptBridge.callHandler(
            'openNativePay',
            {
                'type': '1',
                'orderId': '5sxNE5I4Cacsp9idSA'
            },
            function (responseData) {
                alert(responseData)
            }
        )
    }

    //调用原生支付
    function openPayAli() {
        // type: 1微信，2支付宝
        window.WebViewJavascriptBridge.callHandler(
            'openNativePay',
            {
                'type': '2',
                'orderId': '58sZFMBqXqIsp9icSw&undefined='
            },
            function (responseData) {
                alert(responseData)
            }
        )
    }

    //调用原生压缩iOS,Android不支持
    function compressVideo() {
        window.WebViewJavascriptBridge.callHandler(
            'compressVideo',
            { 'info': 'openPay' },
            function (repsonseData) {
                alert("收到");
            }
        )
    }

    //关闭当前界面Android,iOS不支持
    function closeNativePage() {
        window.WebViewJavascriptBridge.callHandler(
            "closeNativePage",
            "",
            function (repsonseData) {

            }
        )
    }

    function wechatlogin() {
        window.WebViewJavascriptBridge.callHandler(
            "weChatLogin",
            "",
            function (repsonseData) {
                alert(repsonseData);
            }
        )
    }

    function startWeChatVoice() {
        window.WebViewJavascriptBridge.callHandler(
            "weChatVoice",
            { 'type': 'start' },
            function (repsonseData) {
                alert(repsonseData);
            }
        )
    }

    function stopWeChatVoice() {
        window.WebViewJavascriptBridge.callHandler(
            "weChatVoice",
            { 'type': 'stop' },
            function (repsonseData) {
                alert(repsonseData);
            }
        )
    }

    function startNativeRecord() {
        window.WebViewJavascriptBridge.callHandler(
            "nativeRecord",
            { 'type': 'start' },
            function (repsonseData) {
                alert(repsonseData);
            }
        )
    }

    function stopNativeRecord() {
        window.WebViewJavascriptBridge.callHandler(
            "nativeRecord",
            { 'type': 'stop' },
            function (repsonseData) {
                alert(repsonseData);
            }
        )
    }

</script>
<!--<script type="text/javascript">-->
<!--window.localStorage.setItem("a","hello");-->
<!--alert(window.localStorage.getItem("a"));-->
<!--</script>-->

</html>